<template>
    <span>
        <el-button type="primary" @click="toAdd">添加属性</el-button>
    </span>
    <el-divider/>
    <el-descriptions title="Sku信息" column="4">
        <el-descriptions-item label="Spu名称">
            {{skuInfo.spuName}}
        </el-descriptions-item>
        <el-descriptions-item label="Sku名称">
            {{skuInfo.skuName}}
        </el-descriptions-item>
        <el-descriptions-item label="所属分类">
            {{skuInfo.categoryName}}
        </el-descriptions-item>
        <el-descriptions-item label="所属品牌">
            {{skuInfo.brandName}}
        </el-descriptions-item>
        <el-descriptions-item label="sku简介">
            {{skuInfo.skuDescription}}
        </el-descriptions-item>
    </el-descriptions>
    <el-row>
        <el-col :span="23"></el-col>
        <el-col :span="1">
            <router-link to="/main/product/skuInfo" style="text-decoration:none"><el-button size="small" type="warning" @click="back">返回</el-button></router-link>
        </el-col>
    </el-row>
    <el-divider/>

    <el-dialog title="新增属性" width="500px" v-model="addDialog">
        <el-form :model="newAttr" ref="addForm" label-position="left">
            <el-form-item label="属性名" label-width="100px">
                <el-select v-model="newAttr.attrId">
                    <el-option v-for="item in attrCanAddList" :key="item.id" :value="item.id" :label="item.attrName" ></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="属性值" label-width="100px">
                <el-input placeholder="请输入属性值" v-model="newAttr.attrValue"></el-input>
            </el-form-item>
        </el-form>
        
        <template #footer>
            <el-button @click="cancelAdd">取消</el-button>
            <el-button type="primary" @click="add">添加</el-button>
        </template>
    </el-dialog>

    <el-table border :data="tableData" >
        <el-table-column  label="属性名称" prop="attrName">
        </el-table-column>
        <el-table-column label="属性值" prop="attrValue">
        </el-table-column>
        <el-table-column label="操作" width="251px">
            <template #default="scope">
                <el-button size="small" @click="toUpdate(scope)" type="warning">修改</el-button>
                <el-button size="small" @click="toDelete(scope)" type="danger">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
import {ref, reactive, getCurrentInstance} from 'vue'
import { ElMessageBox } from 'element-plus'

export default {
    setup(){
        const {proxy} = getCurrentInstance()
        const addDialog = ref(false)
        const addForm = ref()
        const tableData = ref([])

        const newAttr = reactive({
            attrName:'',
            attrId:-1,
            attrValue:'',
            skuId:proxy.$route.query.skuId
        })

        const spuId = ref(proxy.$route.query.spuId);
        const categoryId = ref(proxy.$route.query.categoryId);
        const brandId = ref(proxy.$route.query.brandId);
        const spuName = ref(proxy.$route.query.spuName);
        const categoryName = ref(proxy.$route.query.categoryName);
        const brandName = ref(proxy.$route.query.brandName);

        const skuInfo = reactive({
            spuName:spuName.value,
            skuName:proxy.$route.query.skuName,
            skuDescription:proxy.$route.query.skuDesc,
            categoryName:categoryName.value,
            brandName:brandName.value,
            categoryId:categoryId.value,
            brandId:brandId.value,
            id:proxy.$route.query.skuId
        })

        const attrList = ref([])

        const attrCanAddList = ref([])

        const attrAddIdList = ref([])

        const getAttrList = () =>{
            proxy.$http.get(proxy.$url.PmsAttrControllerBaseUrl + '/getAllSkuAttrByCategory',{
                params:{
                    categoryId:skuInfo.categoryId
                }
            }).then(res => {
                if(res.data.code === 2000){
                    attrList.value = res.data.data
                    getAttrAddIdList()
                }
            })
        }

        const getAttrAddIdList = () =>{
            proxy.$http.get(proxy.$url.PmsSkuSaleAttrValueController + '/getSkuAddAttrId',{params:{skuId:skuInfo.id}})
                .then(res => {
                    if(res.data.code === 2000){
                        attrAddIdList.value = res.data.data
                        getAttrCanAddList()
                    }
                })
        }

        const getAttrCanAddList = () =>{
            let set = new Set()
            attrCanAddList.value = []
            for(let item of attrAddIdList.value){
                set.add(item)
            }
            for(let item of attrList.value){
                if(!set.has(item.id)){
                    attrCanAddList.value.push(item)
                }
            }
        }

        const toAdd = () =>{
            newAttr.attrName = ''
            newAttr.attrValue = ''
            newAttr.attrId = '请选择'
            addDialog.value = true
        }

        const getData = () =>{
            proxy.$http.get(proxy.$url.PmsSkuSaleAttrValueController + '/getAllSkuAttrInfoById',{params:{skuId:proxy.$route.query.skuId}})
                .then(res =>{
                    if(res.data.code === 2000){
                        tableData.value = res.data.data
                    }
                })
        }

        const add = () =>{
            for(let item of attrList.value){
                if(item.id === newAttr.attrId){
                    newAttr.attrName = item.attrName
                    break;
                }
            }
            proxy.$http.put(proxy.$url.PmsSkuSaleAttrValueController + '/addSkuAttrValue',newAttr)
                .then(res =>{
                    if(res.data.code === 2000){
                        proxy.$message({
                            message:res.data.message,
                            type:'success'
                        })
                        getData()
                        cancelAdd()
                        getAttrAddIdList()
                    }else{
                        proxy.$message({
                            message:res.data.message,
                            type:'error'
                        })
                    }
                })
        }

        const cancelAdd = () =>{
            if(addForm.value){
                addForm.value.resetFields()
            }
            addDialog.value = false
        }

        const toDelete = (scope) =>{
            proxy.$http.delete(proxy.$url.PmsSkuSaleAttrValueController + '/deleteAttrValue',{params:{id:scope.row.id}})
                .then(res =>{
                    if(res.data.code === 2000){
                        proxy.$message({
                            message:res.data.message,
                            type:'success'
                        })
                        getAttrAddIdList()
                        getData()
                    }else{
                        proxy.$message({
                            message:res.data.message,
                            type:'error'
                        })
                    }
                })
        }

        const toUpdate = (scope) => {
            ElMessageBox.prompt("请输入新值","修改",{
                confirmButtonText:"确认",
                cancelButtonText:'取消'
            }).then(({value})=>{
                let data = {
                    id:scope.row.id,
                    attrValue:value
                }
                proxy.$http.post(proxy.$url.PmsSkuSaleAttrValueController + '/updateAttrValue',data)
                    .then(res =>{
                        if(res.data.code === 2000){
                            proxy.$message({
                                message:res.data.message,
                                type:'success'
                            })
                            getData()
                        }else{
                            proxy.$message({
                                message:res.data.message,
                                type:'error'
                            })
                        }
                    })
            })
        }

        const back = () => {
            proxy.$router.push({ name:'skuinfo', query:{
                categoryId:categoryId.value,
                brandId:brandId.value,
                spuId:spuId.value,
                spuName:spuName.value,
                categoryName:categoryName.value,
                brandName:brandName.value,
            }})
        }

        getAttrList()
        getData()

        return {
            newAttr,
            skuInfo,
            attrList,
            attrCanAddList,
            addDialog,
            addForm,
            tableData,
            add,
            toAdd,
            cancelAdd,
            toDelete,
            toUpdate,
            back,
        }
    }
}
</script>

<style scoped>

</style>